﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<!-- 留言板页面 -->
<head>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 引用头部样式 -->
	<jsp:include page="header.jsp"></jsp:include>

	<div>
		<header class="header-article-list">
			<h1>在线留言</h1>
		</header>
		<div>
			<form class="layui-form message-form" id="addForm">
				<div class="layui-form-item"> 
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-inline">
						<input type="text" style="margin-top: 35px" name="username" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电话</label>
					<div class="layui-input-inline">
						<input type="text" style="margin-top: 35px" name="tel" required lay-verify="required|phone|number" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-inline">
						<input type="text" style="margin-top: 35px" name="email" required lay-verify="required|email" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">内容</label>
					<div class="layui-input-inline">
						<textarea name="content" style="margin-top: 35px" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="subBtnAdd">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!-- 引用底部样式 -->
	<jsp:include page="footer.jsp"></jsp:include>

	<!-- 脚本开始 -->
	<script>
	layui.use('form', function() {
		var form = layui.form;
		var $ = layui.$;
		
		//表单提交----添加
		form.on('submit(subBtnAdd)', function(data) {
			var url = "HomeServlet?method=toMessage";//请求地址
			var str = $("#addForm").serialize();//请求参数,表单中的数据,serialize序列化
			console.log(str);// 名=值&名=值
			//ajax请求服务器,判断结果
			$.post(url, str, function(res) {
				console.log(res);
				layer.closeAll();
				if (res) {
					layer.alert('添加成功', {icon: 1});
				} else{
					layer.alert('添加失败', {icon: 1});
				}
			}, "html")
			return false;

		});
	});
	</script>
	<!-- 脚本结束end -->
